<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script src="./d3.js"></script>
<script>

    const data = [
        {
            name: '1月',
            value: "1500"
        },
        {
            name: '2月',
            value: "1000"
        },
        {
            name: '3月',
            value: "600"
        }
    ]
    let pie = d3.pie().value(item => item.value).padAngle(3 * Math.PI / 180)
    let pieRes = pie(data)
    // console.log(pieRes);
    let svg = d3.select("body").append("svg").attr("width", 800).attr("height", 600).style('border', "1px solid black")
    let g = svg.append('g')
    let arc = d3.arc()
        .innerRadius(100)
        .outerRadius(150)
    // let arcRes = arc(pieRes[0])
    // console.log(arcRes);
    let rnd = d3.randomUniform(0, 100);
    pieRes.forEach(pieData => {
    let arcRes = arc(pieData)
    g.append("path")
        .attr("d", arcRes)
        .attr("stroke", "none")
        .attr("fill", d3.color(`rgb(${rnd()}%, ${rnd()}%,${rnd()}%)`))
    });
    // g整体移动
    g.attr('transform', "translate(400, 300)")
</script>

</html>
